
<template>
  <div class="all">
    <div class="title223">
      故障信息收集
    </div>
    <div class="kb33"></div>
    <div class="container">

      <el-form :model="informationForm" status-icon ref="informationForm" label-width="100px"
        class="demo-informationForm">
        <div class="kb3"></div>

        <div class="duan1">

          <el-form-item label="机组" prop="shortage">
            <el-select v-model="informationForm.number" filterable placeholder="请选择">
              <el-option v-for="item in machines" :key="item.machine" :label="item.machine" :value="item.machine">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重大缺陷" prop="shortage">
            <el-select v-model="informationForm.shortage" filterable placeholder="请选择">
              <el-option v-for="item in shortages" :key="item.shortage" :label="item.shortage" :value="item.shortage">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="记录时间" prop="record_time">
            <div class="block">
              <el-date-picker v-model="informationForm.record_time" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </div>




        <div class="duan4">
          <el-form-item label="记录人" prop="person_record">
            <el-select v-model="informationForm.person_record" filterable placeholder="请选择">
              <el-option v-for="item in persons" :key="item.name" :label="item.name + item.username" :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="person_responsibility">
            <el-select v-model="informationForm.person_responsibility" filterable placeholder="请选择">
              <el-option v-for="item in persons" :key="item.name" :label="item.name + item.username" :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="occure_time">
            <div class="block">
              <el-date-picker v-model="informationForm.occure_time" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </div>





        <div class="chang1">
          <el-form-item label="具体情况" prop="detail" style="width:90%">
            <el-input type="textarea" v-model="informationForm.detail" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="chang2">
          <el-form-item label="产生原因" prop="cause" style="width:90%">
            <el-input type="textarea" v-model="informationForm.cause" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="chang3">
          <el-form-item label="应对措施" prop="option" style="width:90%">
            <el-input type="textarea" v-model="informationForm.option" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="chang4">
          <el-form-item label="执行情况" prop="condition" style="width:90%">
            <el-input type="textarea" v-model="informationForm.condition" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="kb3"></div>

        <el-form-item class="bt2">
          <el-button type="primary" @click="createInformation()">提交</el-button>
          <el-button type="primary" @click="recover()">重置</el-button>

          <div class="btdj">
            <el-upload class="upload-demo" :action="uploadUrl" :before-upload="beforeUpload" :on-success="handleSuccess"
              :file-list="fileList">
              <el-button size="normal" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传 Excel 和 Word 文件，且不超过 5MB</div>
            </el-upload>
          </div>

        </el-form-item>
      </el-form>
    </div>

    <el-dialog title="故障信息批量导入" :visible.sync="visiable">

      <el-table ref="multipleTable" :data="uploadData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="number" label="机组">
        </el-table-column>
        <el-table-column prop="shortage" label="重大故障">
        </el-table-column>
        <el-table-column prop="record_time" label="记录时间" sortable>
        </el-table-column>
        <el-table-column prop="person_record" label="记录人" sortable>
        </el-table-column>
        <el-table-column prop="occure_time" label="发生时间" sortable>
        </el-table-column>
        <el-table-column prop="person_responsibility" label="负责人" sortable>
        </el-table-column>
        <el-table-column prop="detail" label="具体情况">
        </el-table-column>
        <el-table-column prop="cause" label="产生原因">
        </el-table-column>
        <el-table-column prop="option" label="应对措施">
        </el-table-column>
        <el-table-column prop="condition" label="执行情况">
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" icon="el-icon-upload" @click="handleSuccess">上传数据</el-button>
        <el-button @click="toggleSelection()" icon="el-icon-error" style="float: right;">取消选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import { createInformation, getShortageList, getPersonList, getMachineList } from '@/api/table';
import { updateMachine, updateShortage } from '@/api/table'
import axios from '@/store/axios';

export default {


  mounted() {
    this.getShortageList();
    this.getPersonList();
    this.getMachineList();
  },


  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },


    beforeUpload(file) {
      const fileType = file.type
      const allowedTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
      const maxSize = 15 * 1024 * 1024
      const fileSize = file.size
      if (!allowedTypes.includes(fileType)) {
        this.$message.error('只能上传 Excel 和 Word 文件')
        return false
      } else if (fileSize > maxSize) {
        this.$message.error('上传文件大小不能超过 15MB')
        return false
      } else {
        const formData = new FormData()
        formData.append('file', file);
        axios.post('http://dgzhet.com:8000/api/upload_excel/', formData).then(response => {

          if (response.data.error_message == 'success') {
            this.$message.success('上传成功')

            // TODO: 处理 Excel 数据...
            const loading = this.$loading({
              lock: true,
              text: '数据上传中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
              loading.close();
              this.uploadData = response.data.data
              setTimeout(this.visiable = true, 50);
            }, 500);
          } else {
            this.$message.error('上传失败')
          }
        }).catch(error => {
          console.log(error)
          this.$message.error('服务器错误')
        })
        return false
      }
    },

    // 处理上传成功的文件数据
    handleSuccess(response, file, fileList) {
      const loading = this.$loading({
        lock: true,
        text: '数据上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      for (let i = 0; i < this.uploadData.length; i++) {
        createInformation(this.uploadData[i]).then(response => {
          let data = response;
        })
      }
      setTimeout(() => {
        loading.close();
        this.uploadData = response.data.data
        setTimeout(this.visiable = true, 50);
      }, 500);
    },

    handleError(error, file, fileList) {
      console.log(error)
      this.$message.error('上传失败')
    },


    handleClick(row) {
      console.log(row);
    },

    get_time(time) {
      console.log(time)
      var month = time.toString().substring(4, 7)
      var day = time.toString().substring(8, 10)
      var year = time.toString().substring(11, 15)
      if (month == "Jan") month = '01'
      else if (month == "Feb") month = '02'
      else if (month == 'Mar') month = '03'
      else if (month == "Apr") month = '04'
      else if (month == "May") month = '05'
      else if (month == "Jun") month = '06'
      else if (month == "Jul") month = '07'
      else if (month == "Aug") month = '08'
      else if (month == "Sep") month = '09'
      else if (month == "Oct") month = '10'
      else if (month == "Nov") month = '11'
      else month = '12'
      return year + '-' + month + '-' + day;
    },

    createInformation() {
      this.informationForm.occure_time = this.get_time(this.informationForm.occure_time)
      this.informationForm.record_time = this.get_time(this.informationForm.record_time)

      createInformation(this.informationForm).then(response => {

        for (var i = 0; i < this.machine_len; i++) {
          if (this.machines[i].machine == this.informationForm.number) {
            this.machine_id = this.machines[i].id;
            this.machine_tmp.count = this.machines[i].count + 1;
            updateMachine(this.machine_id, this.machine_tmp)
            break;
          }
        }

        for (var i = 0; i < this.shortage_len; i++) {
          if (this.shortages[i].shortage == this.informationForm.shortage) {

            this.shortage_id = this.shortages[i].id;
            this.shortage_tmp.count = this.shortages[i].count + 1;
            updateShortage(this.shortage_id, this.shortage_tmp);
            break;
          }
        }

        this.informationForm.number = ''
        this.informationForm.shortage = ''
        this.informationForm.detail = ''
        this.informationForm.occure_time = ''
        this.informationForm.cause = ''
        this.informationForm.option = ''
        this.informationForm.person_responsibility = ''
        this.informationForm.person_record = ''
        this.informationForm.record_time = ''
        this.informationForm.condition = ''
        this.$message({
          message: '数据录入成功！',
          type: 'success'
        });
      })
    },

    getShortageList() {
      getShortageList().then(response => {
        this.shortages = response.data.results
        this.shortage_len = response.data.count
      })
    },

    getPersonList() {
      getPersonList().then(response => {
        this.persons = response.data.results
      })
    },

    getMachineList() {
      getMachineList().then(response => {
        this.machines = response.data.results
        this.machine_len = response.data.count
      })
    },

    recover() {
      this.informationForm.number = ''
      this.informationForm.shortage = ''
      this.informationForm.detail = ''
      this.informationForm.occure_time = ''
      this.informationForm.cause = ''
      this.informationForm.option = ''
      this.informationForm.person_responsibility = ''
      this.informationForm.person_record = ''
      this.informationForm.record_time = ''
      this.informationForm.condition = ''
    }

  },



  data() {
    return {
      persons: [],
      shortages: [],
      tableData: [],
      machines: [],
      informationForm: {
        number: '',
        shortage: '',
        detail: '',
        occure_time: '',
        cause: '',
        option: '',
        person_responsibility: '',
        person_record: '',
        record_time: '',
        condition: '',
        is_delete: false,
      },
      dialogFormVisible: false,
      machine_len: '',
      shortage_len: '',
      machine_id: '',
      shortage_id: '',
      machine_tmp: {
        count: 0
      },
      shortage_tmp: {
        count: 0
      },
      uploadUrl: 'http://dgzhet.com:8000/api/upload_excel/',
      fileList: [],
      uploadData: [],
      visiable: false
    }
  }
}
</script>

<style scoped>
.container {
  box-shadow: 0px 0px 8px #888888;
  background-color: rgb(255, 255, 255);
  width: 75%;
  margin-left: 14%;

  min-height: 100%;
}

.ddd {
  margin-top: 10%;
}

.all {
  background-color: rgb(243, 243, 243);
  background-size: cover;
  min-height: 94.8vh;
  padding-top: 3%;
}

.rightt {
  width: 60%;
  float: right;
}

.bt2 {
  width: 55%;
  background-color: rgba(5, 26, 37, 0);
  margin-left: 33.5%;
}

.left {


  float: left;
  width: 40%;

}

::v-deep .el-form-item__label {
  font-size: 17px;
}

.kb3 {
  padding-top: 30px;
  width: 100%;
  background-color: rgba(95, 167, 209, 0);
}

.kb33 {
  padding-top: 70px;
  height: 100%;

}

.kb4 {
  padding-top: 78px;
  background-color: rgba(95, 167, 209, 0);
}

.title223 {
  text-align: center;
  color: rgb(65, 66, 66);
  font-weight: bolder;
  font-size: 300%;
  font-family: "KaiTi";
  border-bottom: 1px solid rgb(80, 80, 80);
}

body {
  background-color: rgb(243, 243, 243);
  background-size: cover;
}

.btdj {
  padding-top: 1%;
  padding-left: 4%;
}

.el-upload__tip {
  margin-left: -10%;
}

.duan1 {

  display: flex;
  justify-content: space-between;

  margin-top: 0.3%;
  margin-left: 5%;
  margin-right: 11%;
}





.duan4 {
  display: flex;
  justify-content: space-between;

  margin-top: 0.3%;
  margin-left: 5%;
  margin-right: 11%;
}

.form-item-wrapper label {
  font-size: 16px;
}


.chang1 {
  margin-top: 3%;
  margin-left: 5%;
}

.chang2 {

  margin-left: 5%;
}

.chang3 {
  margin-left: 5%;
}

.chang4 {
  margin-left: 5%;
}
</style>